<template>
  <div>
    <el-col :span="9" :v-loding="loading">
      <el-card :v-loding="loading">
        <div slot="header" class="clearfix">
          <span>缓存区列表</span>
        </div>
        <el-table :data="regionData" @row-dblclick="regionChange" style="width: 100%">
          <el-table-column prop="name" :label="$t('cache.regionCode')">
          </el-table-column>
          <el-table-column prop="size" :label="$t('cache.size')">
          </el-table-column>
          <el-table-column prop="ttl" :label="$t('cache.ttl')">
          </el-table-column>
          <el-table-column :label="$t('handle')" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete" size="small" @click="deltRegion(scope.row.name)">
                {{ $t('delete') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="7" :v-loding="loading">
      <el-card :v-loding="loading">
        <div slot="header" class="clearfix">
          <span>缓存区所属key</span>
        </div>
        <el-table :data="regionKeysData" @row-dblclick="keyChange" style="width: 100%">
          <el-table-column prop="key" :label="$t('cache.key')">
          </el-table-column>
          <el-table-column :label="$t('handle')" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete" size="small" @click="deltKey(scope.row.key)">
                {{ $t('delete') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="8" :v-loding="loading">
      <el-card :v-loding="loading">
        <div slot="header" class="clearfix">
          <span>缓存详情</span>
        </div>
        <el-form :model="dataForm" ref="dataForm" :label-width="'85px'">

          <el-form-item :label="$t('cache.regionCode')" prop="code">
            <!--文本框-->
            <el-input v-model="dataForm.region" :placeholder="$t('cache.regionCode')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('cache.key')" prop="code">
            <!--文本框-->
            <el-input v-model="dataForm.key" :placeholder="$t('cache.key')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('cache.level')" prop="code">
            <!--文本框-->
            <el-input v-model="dataForm.level" :placeholder="$t('cache.level')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('cache.value')" prop="code">
            <!--文本框-->
            <el-input type="textarea" :rows="8" v-model="dataForm.value" :placeholder="$t('cache.value')"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </div>
</template>
<script>

export default {
  data () {
    return {
      loading: false,
      dataForm: {
        region: '',
        key: '',
        value: ''
      },
      param: {},
      activeRegionCode: '',
      regionData: [],
      regionKeysData: []
    }
  },
  activated () {
    this.loading = true
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        Promise.all([
          this.regionList()
        ]).then(() => {
        })
      })
    },
    regionList () {
      return this.$http.get('cache/regionList').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.regionData = res.data
      }).catch(() => { })
    },
    regionKeysList (regionCode) {
      this.$http.get('cache/keyList?regionCode=' + regionCode).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.regionKeysData = res.data
      }).catch(() => { })
    },
    cacheDetails (params) {
      this.$http.post('cache/cacheDetails', params).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => { })
    },
    regionChange (row, column, event) {
      this.activeRegionCode = row.name
      this.regionKeysList(row.name)
    },
    keyChange (row, column, event) {
      var params = {}
      params.region = this.activeRegionCode
      params.key = row.key
      this.cacheDetails(params)
    },
    deltRegion (regionCode) {
      this.param.region = regionCode
      this.$http.post('cache/deltRegion', this.param).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        } else {
          this.regionList()
          this.regionKeysList(regionCode)
          return this.$message.info(res.msg)
        }
      }).catch(() => { })
    },
    deltKey (key) {
      this.param.region = this.activeRegionCode
      this.param.key = key
      this.$http.post('cache/deltKey', this.param).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        } else {
          this.regionKeysList(this.activeRegionCode)
          return this.$message.info(res.msg)
        }
      }).catch(() => { })
    }
  }
}
</script>
